/**
 * @author v.lugovksy
 * created on 16.12.2015
 */
(function () {
    'use strict';

    angular.module('KingAdmin.pages.pdev')
        .directive('mutiLineCharts', mutiLineCharts);

    /** @ngInject */
    function mutiLineCharts() {
        return {
            restrict: 'EA',
            scope: {
                chnIds: '=',
                beginDate: '=',
                endDate: '='
            },
            template: '<div>这是柱图</div>',
            controller: function ($scope, $filter, EnvdataService, ChannelService, HouranaService) {
                console.log($scope.chnIds.chnIds);
                console.log($scope.beginDate);
                console.log($scope.endDate);

                $scope.data = {
                    title: '历史数据分析',
                    legendData: ['温度'],
                    seriesName: '温度',
                    xdata: ['周一','周二','周三','周四','周五','周六','周日'],
                    series: [
                        {
                            name: '温度',
                            type:'line',
                            stack: '总量',
                            data: [25, 34, 23, 34, 15, 25, 22],
                            markPoint : {
                                data : [
                                    {type : 'max', name: '最大值'},
                                    {type : 'min', name: '最小值'}
                                ]
                            }
                        }
                    ]
                };

                // $scope.chnId = '09c1f7ea2f1641b68d93ed959d7ff6be';
                if ($scope.beginDate == null) {
                    var today = new Date();
                    $scope.beginDate = $filter('date')(today, 'yyyy-MM-dd');
                    console.log($scope.beginDate);
                }

                // 获取并组装数据信息
                $scope.freshChart = function() {
                    // TODO 在1秒钟之内没有操作，进行获取数据
                    var beginTime = $filter("date")($scope.beginDate.startDate, "yyyy-MM-dd");
                    var endTime = $filter("date")($scope.endDate.endDate, "yyyy-MM-dd");
                    var chns = $scope.chnIds.chnIds.join(",");
                    var param = {chns: chns, startTime: beginTime, endTime: endTime};

                    if ($scope.chnIds.chnIds.length > 0) {
                        // 获取统计数据
                        HouranaService.getApiList(param, function (data) {
                            console.log(data);
                            var devMap = data.result.devMap;
                            var chnMap = data.result.chnMap;
                            var dataMap = data.result.dataMap;
                            var legendArr = [];
                            var xData = [];
                            var seriesArr = [];

                            // 设置图表数组信息
                            angular.forEach(data.result.dataMap, function (valueList, key) {
                                var legendName = devMap[key]['name'] + "-通道" + chnMap[key]['number'];
                                legendArr.push(legendName);
                                var sData = [];
                                xData = [];

                                angular.forEach(valueList, function (item) {
                                    sData.push(item['avgVal']);
                                    xData.push(item['anaTime']);
                                });


                                var curSerial = {
                                    name: legendName,
                                    type:'line',
                                    data: sData,
                                    markPoint : {
                                        data : [
                                            {type : 'max', name: '最大值'},
                                            {type : 'min', name: '最小值'}
                                        ]
                                    }
                                };

                                console.log(curSerial);
                                console.log(xData);

                                seriesArr.push(curSerial);
                            });

                            $scope.data = {
                                title: '历史数据分析',
                                legendData: legendArr,
                                xdata: xData,
                                series: seriesArr
                            };
                        });
                    }
                };

                $scope.$watch('beginDate', function (value) {
                    console.log(value);
                    $scope.freshChart();
                });
                $scope.$watch('endDate', function (value) {
                    console.log(value);
                    $scope.freshChart();
                });
                $scope.$watch('chnIds', function (value) {
                    console.log("change chanIds");
                    $scope.freshChart();
                });
            },
            link: function (scope, element, attr) {
                console.log("fukkk-=-===================");

                var chart = element.find('div')[0];
                var parent = element[0];
                chart.style.width = parent.clientWidth + 'px';
                chart.style.height = parent.clientHeight + 'px';

                console.log(scope.data);

                var myChart = echarts.init(chart, 'macarons');
                // var option = {
                //     title: {
                //         text: scope.data.title,
                //         left: 'center'
                //     },
                //     tooltip: {
                //         trigger: 'axis'
                //     },
                //     legend: {
                //         data: scope.data.legendData,
                //         x: 'left'
                //     },
                //     grid: {
                //         left: '3%',
                //         right: '4%',
                //         bottom: '3%',
                //         containLabel: true
                //     },
                //     toolbox: {
                //         feature: {
                //             saveAsImage: {}
                //         }
                //     },
                //     xAxis: {
                //         type: 'category',
                //         boundaryGap: false,
                //         data: scope.data.xdata
                //     },
                //     yAxis: {
                //         type: 'value'
                //     },
                //     series: [
                //         {
                //             name: scope.data.seriesName,
                //             type:'line',
                //             stack: '总量',
                //             data: scope.data.ydata
                //         }
                //     ]
                // };
                // myChart.setOption(option);
                // myChart.resize();

                scope.$watch('data', function (newValue, oldValue, scope) {
                    console.log(newValue);
                    console.log(oldValue);
                    console.log(scope.data);

                    var option = {
                        title: {
                            text: scope.data.title,
                            // left: 'center'
                        },
                        tooltip: {
                            trigger: 'axis'
                        },
                        legend: {
                            data: scope.data.legendData,
                            // x: 'left'
                        },
                        grid: {
                            left: '3%',
                            right: '4%',
                            bottom: '3%',
                            containLabel: true
                        },
                        toolbox: {
                            feature: {
                                mark : {show: true},
                                dataView : {show: true, readOnly: false},
                                magicType : {show: true, type: ['line', 'bar']},
                                restore : {show: true},
                                saveAsImage : {show: true}
                            }
                        },
                        xAxis: {
                            type: 'category',
                            boundaryGap: false,
                            data: scope.data.xdata
                        },
                        yAxis: {
                            type: 'value',
                            scale: true
                        },
                        series: scope.data.series,
                        dataZoom: [
                            {
                                type: 'slider',
                                show: true,
                                xAxisIndex: [0],
                                start: 1,
                                end: 35
                            }
                            ]
                    };
                    myChart.clear();
                    myChart.setOption(option);
                    myChart.resize();
                })
            }
        };
    }
})();